<template>
  <!-- 消息中心 -->
  <div class="box">
    <Hand :left="true" :iconbool="false" title="消息中心" @back="fn"></Hand>
    <ul>
      <li v-for="(item, index) in msgarr" :key="index">
        <div class="masg">
          <div class="imgdiv">
            <img src="@/img/后台/后台登录页面大logo.png" alt="" />
          </div>
          <div class="msgdiv">
            <p>{{ item.title }}</p>
            <p class="p2">{{ item.msg }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();

const msgarr = [
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
  { title: "OMINI人民广场自助回收机", msg: "自助回收成功" },
  { title: "OMINI提现系统", msg: "提现已到账，请及时查收。" },
];

function fn() {
  router.back();
}
</script>

<style lang="less" scoped>
.box {
  height: 100vh;
  width: 100vw;
  background-color: #ecfdfa;
  overflow: auto;
}

.masg {
  width: 90vw;
  height: 15vw;
  border-radius: 3vw;
  display: flex;
  background-color: white;
  margin-left: 5vw;
  margin-top: 5vw;
  .msgdiv {
    margin-top: 2vw;
    font-size: 4vw;
    .p2 {
      font-size: 3vw;
      margin-top: 1.5vw;
    }
  }
  .imgdiv {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    border: 1px solid gray;
    margin-left: 5vw;
    margin-top: 2vw;
    margin-right: 5vw;

    img {
      width: 7vw;
      height: 7vw;
      margin-left: 1.5vw;
      margin-top: 1.2vw;
    }
  }
}
</style>
